<template>
	<div class="login_page">
		<div class="left">
			<img src="../assets/img/login/office.svg" />
		</div>
		<div class="right">
			<span>登&nbsp;&nbsp;&nbsp;&nbsp;录</span>
			<el-form id="formLabel" ref="ruleFormRef" :model="form" :rules="rules" size="large" label-position="top" label-width="120px" style="font-size: 20px">
				<el-form-item label="用户名：" prop="username">
					<el-input class="input" v-model="form.username" />
				</el-form-item>
				<el-form-item label="密码：" prop="password">
					<el-input class="input" v-model="form.password" />
				</el-form-item>
				<el-form-item>
					<el-button class="btn" type="primary" @click="login(ruleFormRef)">登录</el-button>
				</el-form-item>
				<el-form-item>
					<el-button class="btn" @click="outerVisible = true">注册</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!-- 注册窗口 -->
		<el-dialog v-model="outerVisible" title="用户注册" customClass="customWidth">
			<template #default>
				<el-form id="regFormLabel" ref="regRuleFormRef" :model="regForm" :rules="regRules" size="large" label-position="top" label-width="120px" style="font-size: 20px">
					<el-form-item label="昵称：" prop="nickname">
						<el-input class="regInput" v-model="regForm.nickname" />
					</el-form-item>
					<el-form-item label="用户名：" prop="username">
						<el-input class="regInput" v-model="regForm.username" />
					</el-form-item>
					<el-form-item label="密码：" prop="password">
						<el-input class="regInput" v-model="regForm.password" />
					</el-form-item>
					<el-form-item label="手机号：" prop="phone">
						<el-input class="regInput" v-model="regForm.phone" />
					</el-form-item>
				</el-form>
			</template>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="outerVisible = false">取消</el-button>
					<el-button type="primary" @click="register(regRuleFormRef)">确认</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
 
<script lang='ts'>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
// 导入表单接口，用于表单验证
import { ElMessage, FormInstance } from "element-plus";
// 请求接口
import request from "../api/request";
export default {
	name: "login",
	setup() {
		const router = useRouter();
		// 用户登录表单
		// form表单包含的数据项
		const form = reactive({
			username: "",
			password: "",
		});
		// 调用表单接口生成
		const ruleFormRef = ref<FormInstance>();
		// 具体规则方法
		const checkName = (rule: any, value: any, callback: any) => {
			if (!value) {
				return callback(new Error("请输入用户名"));
			} else {
				return callback();
			}
		};
		const checkPassword = (rule: any, value: any, callback: any) => {
			if (!value) {
				return callback(new Error("请输入密码"));
			} else {
				return callback();
			}
		};
		// 表单的具体规则
		const rules = reactive({
			username: [{ validator: checkName, trigger: "blur" }],
			password: [{ validator: checkPassword, trigger: "blur" }],
		});
		const login = async (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			await formEl.validate((valid, fields) => {
				if (valid) {
					console.log("submit!");
					request.post("/login", form).then(
						(res) => {
							console.log(res);
							if (res.status === 0) {
								ElMessage({
									type: "success",
									message: res.msg, //忽视这个报错，能成功运行就没有问题
								});
								window.localStorage.setItem("token", res.token); //忽视这个报错，能成功运行就没有问题
								if (res.admin == 0) {
									router.push("/userMain");
								}
							} else {
								ElMessage({
									type: "error",
									message: res.msg,
								});
							}
						},
						(err) => {
							console.log(err);
						}
					);
				} else {
					console.log("error submit!", fields);
				}
			});
		};

		// 用户注册表单
		const outerVisible = ref(false);
		const regForm = reactive({
			nickname: "",
			username: "",
			password: "",
			phone: "",
		});
		const regRuleFormRef = ref<FormInstance>();
		const regCheckNickame = (rule: any, value: any, callback: any) => {
			if (!value) {
				return callback(new Error("请输入昵称"));
			} else {
				return callback();
			}
		};
		const regCheckName = (rule: any, value: any, callback: any) => {
			if (!value) {
				return callback(new Error("请输入用户名"));
			} else if (value.length < 3) {
				return callback(new Error("用户名长度不能小于3"));
			} else {
				return callback();
			}
		};
		const regCheckPassword = (rule: any, value: any, callback: any) => {
			if (!value) {
				return callback(new Error("请输入密码"));
			} else if (value.length < 4) {
				return callback(new Error("密码长度不能小于4"));
			} else {
				return callback();
			}
		};
		const regCheckPhone = (rule: any, value: any, callback: any) => {
			const regPhone =
				/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
			if (!value) {
				return callback(new Error("请输入手机号"));
			} else if (!regPhone.test(value)) {
				return callback(new Error("手机号格式错误,请检查"));
			} else {
				return callback();
			}
		};
		const regRules = reactive({
			nickname: [{ validator: regCheckNickame, trigger: "blur" }],
			username: [{ validator: regCheckName, trigger: "blur" }],
			password: [{ validator: regCheckPassword, trigger: "blur" }],
			phone: [{ validator: regCheckPhone, trigger: "blur" }],
		});
		const register = async (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			await formEl.validate((valid, fields) => {
				if (valid) {
					request.post("/register", regForm);
					outerVisible.value = false;
				} else {
					console.log("error submit!", fields);
				}
			});
		};

		return {
			form,
			login,
			rules,
			ruleFormRef,
			regForm,
			regRules,
			regRuleFormRef,
			outerVisible,
			register,
		};
	},
};
</script>
 
<style lang='less' scoped>
.login_page {
	display: flex;
	flex-flow: row;
	.left {
		height: 100vh;
		width: 50%;
		background-color: rgb(52, 150, 255);
		img {
			display: block;
			margin-top: 20%;
			margin-left: 30%;
			transform: scale(1.1, 1.1);
		}
	}
	.right {
		position: relative;
		height: 100vh;
		width: 50%;
		span {
			position: absolute;
			font-size: 50px;
			top: 20%;
			left: 45%;
		}
		#formLabel {
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			.input {
				width: 400px;
				line-height: 22px;
			}
			.btn {
				width: 400px;
			}
		}
		:deep(#formLabel .el-form-item__label) {
			font-size: 22px;
		}
	}
	:deep(.customWidth) {
		width: 30%;
		.regInput {
			width: 700px;
		}
	}
}
</style>